import React, { Component } from 'react';
import {Text,View,Dimensions,ScrollView,StyleSheet} from 'react-native';
import {Tabs} from 'iftide';
const screenProps={
    screenWidth:Dimensions.get('window').width,
    screenHeight:Dimensions.get('window').height
}
export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state={
            num:123
        }
    }

    tabEventClick=(data)=>{
        //this.setState({num:456})
    }
    _tab1 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50,alignItems:'center',justifyContent:'center' }}>
                 <Text>第一个Tab</Text>
            </View>
        )
    }

    _tab2 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50,alignItems:'center',justifyContent:'center' }}>
                 <Text>第二个Tab</Text>
            </View>
        )
    }
    _tab3 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50,alignItems:'center',justifyContent:'center' }}>
                 <Text>第三个Tab</Text>
            </View>
        )
    }
    _tab4 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50,alignItems:'center',justifyContent:'center' }}>
                 <Text>第四个Tab</Text>
            </View>
        )
    }
    _tab5 = () => {
        return(
            <View  style={{ backgroundColor: '#f5f7f9',height:50,alignItems:'center',justifyContent:'center' }}>
                 <Text>第五个Tab</Text>
            </View>
        )
    }
     
    render() {
        
        let tab = {
            themeColor: '#FF7B7B',
            // borderColor:'#f1f1f1',
            radius:0,
            padding:0,
            type: 'linear',
            // activeLinePosition:'bottom',
            isUpdate:false,
            backgroundHeight:35,
            tabData:[
                {
                    text:'标签一',
                    key:'tab1',
                    img:require('./Icon.png'),
                    tabContent:this._tab1
                },
                {
                    text:'标签二',
                    key:'tab2',
                    img:require('./Icon.png'),
                    tabContent:this._tab2
                },
                {
                    text:'标签三',
                    key:'tab3',
                    active:true,
                    img:require('./Icon.png'),
                    tabContent:this._tab3
                },
                {
                    text:'标签四',
                    key:'tab4',
                    // img:require('./Icon.png'),
                    tabContent:this._tab4
                },
                {
                    text:'标签五',
                    key:'tab5',
                    tabContent:this._tab5
                }
            ],
            eventClick:this.tabEventClick
        }
        
        let tab1 = {
            hasActiveLine:true,
            tabItemWidth:56,
            backgroundHeight:200,
            height:100,
            activeLinePosition:"bottom",
            tabPosition:"bottom",
            tabData:[
                {
                    text:'标签一',
                    key:'tab1',
                    active:true,
                    tabContent:this._tab1
                },
                {
                    text:'标签二',
                    key:'tab2',
                    tabContent:this._tab2
                },
                {
                    text:'标签三',
                    key:'tab3',
                   
                    tabContent:this._tab3
                }
            ],
            eventClick:this.tabEventClick
        }

        let tab2 = {
            radius:10,
            type: 'linear',
            padding:0,
            themeColor: '#FF7B7B',
            borderColor:'#f1f1f1',
            backgroundHeight:80,
            hasActiveLine:true,
            height:50,
            tabData:[
                {
                    text:'带标签页一',
                    key:'tab1',
                    tabContent:this._tab1,
                    active:true,
                    img:require('./Icon.png'),
                },
                {
                    text:'带标签页二',
                    key:'tab2',
                    tabContent:this._tab2,
                    img:require('./Icon.png'),
                },
                {
                    text:'带标签页三',
                    key:'tab3',
                    tabContent:this._tab3,
                    img:require('./Icon.png'),
                },
                {
                    text:'带标签页四',
                    key:'tab4',
                    tabContent:this._tab4,
                    img:require('./Icon.png'),
                },
                {
                    text:'带标签页五',
                    tabContent:this._tab5,
                    key:'tab5'
                }
            ],
            eventClick:this.tabEventClick,
            tabPosition:'left',
            activeLinePosition:'right'
        }
        /*
        * width:screenProps.screenHeight,height:screenProps.screenWidth,transform: [{ rotate: '90deg' }]
        * */
        return (
            <View style={{flex:1,backgroundColor:'white'}}>
                <Text style={styles.text}>样式二</Text>
                <View style={{height:300}}>
                <Tabs {...tab1}/> 
                </View>
                <Text style={styles.text}>样式三</Text>
                <Tabs {...tab}/>
                <Text style={styles.text}>样式四</Text>
                <Tabs {...tab2}/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    text: {
        marginTop:10,
        padding: 5,
        backgroundColor: '#f5f7f9',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
    }
})
 